<template>
	<view class="editName">
		<!-- 姓名 -->
		<view class="name" v-if="keyName == 'avatar'">
			<button class="avatar" open-type="chooseAvatar" @chooseavatar="chooseAvatar">
				<image class="avatar-img" :src="avatarUrl || '/static/mine.png'" mode=""></image>
				<view class="avatar-edit">
					<image class="avatar-edit-icon" src="@/static/images/edit_white.png" mode=""></image>
				</view>
			</button>
			<view class="form-item">
				<view class="form-item-label">昵称</view>
				<view class="form-item-content"><input type="nickname" :focus="true" v-model="nameTxt"
						placeholder="请输入姓名" maxlength="10" placeholder-style="color:#cccccc" />
				</view>
			</view>
		</view>

		<view class="phone" v-if="keyName == 'phone'">电话号码</view>
		<view class="vehicle" v-if="keyName == 'vehicleName'">
			<view class="vehicle_content">
				<view class="vehicle_item" v-for="(item, index) in vehicleList" :key="index"
					@click="chooseVehicle(item)">
					<view class="vehicle_item_left">{{ item.dictValue }}</view>
					<view class="vehicle_item_right">
						<view class="active circle" v-if="item.dictKey == activeVehicle"><uni-icons
								type="checkmarkempty" size="22" color="#fff"></uni-icons></view>
						<view class="circle" v-else></view>
					</view>
				</view>
			</view>
		</view>
		<!-- 隐私设置 -->
		<view class="vehicle" v-if="keyName == 'showInfo'">
			<view class="vehicle_content">
				<view class="vehicle_item">
					<view class="vehicle_item_left">不展示个人信息</view>
					<view class="vehicle_item_right">
						<switch color="#0091ff" style="transform:scale(0.7)" :checked="switchValue == 2 ? true : false"
							@change="changeSwitch" />
					</view>

				</view>
				<view class="tips">
					注：开启后小程序-通讯录其他成员无法查看您的个人信息详情
				</view>
			</view>
		</view>
		<view class="bottomBtn">
			<view @click="handleEditName(keyName)">确认</view>
		</view>
	</view>
</template>

<script>
import { getDict } from '@/apis/personalCenter.js';
export default {
	props: {
		name: {
			type: Object
		},
		keyName: {
			type: String,
			require: true
		}
	},
	data() {
		return {
			avatarUrl: '',
			nameTxt: '',
			vehicleList: [],
			activeVehicle: '',
			switchValue: '',
			userId: '',
			info: {}
		};
	},
	watch: {
		name(newVal) {
			this.updateNames();
		}
	},
	async created() { 
		await this.fetchVehicle();
		this.updateNames();
	},
	methods: {
		updateNames() {
			this.userId = this.name.userId;
			switch (this.keyName) {
			case 'avatar':
				this.nameTxt = this.name.realName;
				this.avatarUrl = this.name.value;
				break;
			case 'vehicleName':
				this.activeVehicle = this.name;
				break;
			case 'showInfo':
				this.switchValue = this.name.value;
				break;
			}
		},
		// 选择头像
		chooseAvatar(res) {
			const path = res.detail.avatarUrl || '';
			if (!path) {
				return;
			}
			uni.showLoading({
				title: '上传中'
			});
			this.http
				.upload(path)
				.then(res => {
					// console.log(res.data.link);
					// let avatar = res.data.link;
					this.avatarUrl = res.data.link;
					uni.hideLoading();
				})
				.catch(err => {
					uni.hideLoading();
				});
		},
		// 获取交通工具类型
		fetchVehicle() {
			return new Promise((resolve) => {
				getDict({ key: 'vehicle' }).then(res => {
					console.log(res, '交通工具');
					if (res) {
						this.vehicleList = res.data;
					}
					resolve();
				}).catch(err=>{
					resolve();
				});
			});
		},
		chooseVehicle(res) {
			this.activeVehicle = res.dictKey;
		},
		changeSwitch(e) {
			this.switchValue = e.detail.value == true ? 2 : 1;
		},
		handleEditName(type) {
			let obj = {};
			switch (type) {
			case 'avatar':
				if (!this.nameTxt) {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					});
					return;
				}
				obj[this.keyName] = this.avatarUrl;
				obj['realName'] = this.nameTxt;
				break;
			case 'vehicleName':
				if (!this.activeVehicle) {
					uni.showToast({
						title: '请选择交通工具',
						icon: 'none'
					});
					return;
				}
				obj['vehicle'] = this.activeVehicle;
				break;
			case 'showInfo':
				obj['showInfo'] = this.switchValue;
			}

			this.$emit('update', obj);
		}
	}
};
</script>

<style lang="scss" scoped>
button {
	padding: 0;
	margin: 0;
	background-color: #f3f6f8;
}

button:after {
	border: none;
}

.editName {
	background-color: #f3f6f8;
	// display: flex;
	// justify-content: center;
	height: 100vh;
	display: flex;

	.name {
		width: 100%;

		.avatar {
			width: 112rpx;
			height: 112rpx;
			margin: 36rpx auto;
			position: relative;

			&-img {
				width: 112rpx;
				height: 112rpx;
				background: #e9e9e9;
				border-radius: 50%;
			}

			&-edit {
				width: 32rpx;
				height: 32rpx;
				background: #0091ff;
				border-radius: 50%;
				position: absolute;
				bottom: 0rpx;
				right: 0rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				z-index: 4;

				&-icon {
					width: 24rpx;
					height: 24rpx;
				}
			}
		}
	}

	.form-item {
		width: calc(100% - 40rpx - 56rpx);
		height: 80rpx;
		display: flex;
		align-items: center;
		font-size: 28rpx;
		padding: 0 28rpx;
		background-color: #fff;
		margin: 20rpx auto;
		border-radius: 8rpx;

		&-label {
			width: 90rpx;
			color: #666;
		}

		&-content {
			flex: 1;
			color: #333;

			input {
				width: 100%;
			}
		}
	}

	.vehicle {
		width: 100%;
		margin: 16rpx 20rpx;
	}

	.vehicle_content {

		// margin: 16rpx 20rpx 0 20rpx;
		.vehicle_item {
			padding: 20rpx 16rpx 20rpx 28rpx;
			background: #fff;
			border-radius: 8rpx;
			display: flex;
			justify-content: space-between;
			margin-bottom: 16rpx;
			align-items: center;
			color: #333;

			.circle {
				width: 32rpx;
				height: 32rpx;
				border-radius: 50%;
				border: 1rpx solid #ccc;
				box-sizing: border-box;
			}

			.active {
				background-color: #0091ff;
				display: flex;
				justify-content: center;
				align-items: center;
				border: none;

				view {
					display: flex;
				}
			}
		}

		.tips {
			color: #999999;
			font-size: 24rpx;
		}
	}

	.bottomBtn {
		height: 98rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom: 0;
		width: 100%;

		view {
			height: 70rpx;
			width: 720rpx;
			color: #fff;
			background: #0091ff;
			border-radius: 8rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}
</style>
